﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Activity.aspx.cs" Inherits="Token.Piker.Web.Activity" %>

<%@ Register TagPrefix="uc" TagName="ucHead" Src="~/uc/head.ascx" %>
<%@ Register TagPrefix="uc" TagName="ucFoot" Src="~/uc/foot.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>皮壳网画题</title>
    <link rel="stylesheet" type="text/css" href="css/activity.css" />
    <link href="css/uc.css" rel="stylesheet" type="text/css" />
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <link href="js/fancyapps-fancyBox/source/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/tab.js"></script>
    <script src="js/fancyapps-fancyBox/lib/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="js/fancyapps-fancyBox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
</head>
<body>

<uc:ucHead ID="ucHeader" runat="server" />
    <form id="form1" runat="server">
<div class="content">
  <div class="online-theme">正在进行的主题</div>

  <!--画题图片滚动切换-->
  <div class="theme">
    <div class="big_photo">
      <dl>
        <dt><a href="#" style="width:600px; height:400px; display:block; overflow:hidden"><img id="bigPhoto"/></a></dt>
        <dd>
          <p><span class="style" id="theme"></span><span id="descrip"></span>.<span class="float" id="on_off_line"></span></p>
          <p><span class="margin"><span id="count"></span>人参与</span>时间：<span id="begin_time"></span>-<span id="end_time"></span></p>
        </dd>
      </dl>
    </div>
    <div class="small_photo">
    <asp:Repeater ID="rptSlide" runat="server">
        <ItemTemplate>      
        <div class="container">
        <ul>
          <li class="padding-top">
            <p class="color slide_theme"><%#Eval("Theme") %></p>
            <p class="right slide_on_off_line"><%#Convert.ToInt32(Eval("Flag").ToString())==0?"[线上活动]":"[线下活动]" %></p>
            <p class="font">时间：</p>
            <p class="font"><span class="slide_begin_time"><%#Eval("StartTime").ToString().Substring(0, 9).Replace("/", ".")%></span>-<span class="slide_end_time"><%#Eval("EndTime").ToString().Substring(0, 9).Replace("/", ".")%></span></p>
          </li>
          <li><a href="#" style="width:240px; height:160px; display:block; overflow:hidden"><img src='<%#ResolveClientUrl(Eval("CoverURL").ToString()) %>' alt='<%#Eval("Descrip") %>' id='<%#Eval("ID") %>' class="slide_element"/></a></li>
        </ul>
      </div>
      </ItemTemplate>
    </asp:Repeater>
    </div>
  </div>
  <!--画题滚动切换结束-->
  <div class="activity">
    <div class="tab_menu">
      <ul>
        <li class="selected">全部</li>
        <li>线上活动</li>
        <li>线下活动</li>
      </ul>
    </div>
    <div class="tab_box">
      <div>
       <asp:Repeater ID="rptAll" runat="server" onitemdatabound="rptAll_ItemDataBound">
        <ItemTemplate>
             <div class="row">
          <div class="main_photo">
            <ul>
              <li><a href="#" style="width:120px; height:120px; display:block; overflow:hidden"><img src='<%#ResolveClientUrl(Eval("CoverURL").ToString()) %>' alt='<%#Eval("Descrip") %>' class="coverUrl"/></a></li>
              <li class="padding">
                <p class="color"><%#Eval("Theme") %></p>
                <p><%#Eval("PartCount")%>人参与&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="lblPhotoCountOne" runat="server"></asp:Label>张照片</p>
                <p>时间：<%#Eval("StartTime").ToString().Substring(0,9).Replace("/",".") %>-<%#Eval("EndTime").ToString().Substring(0, 9).Replace("/", ".")%></p>
                <p><%#Convert.ToInt32(Eval("Flag").ToString())==0?"[线上活动]":"[线下活动]" %></p>
              </li>
            </ul>
          </div>
          <div class="all-photo">
            <ul>
                <asp:Repeater ID="rptAllImg" runat="server">
                    <ItemTemplate>
                        <li><a href="#" style="width:100px; height:100px; display:block; overflow:hidden"><img src="AJAX/Thumbnail.ashx?pid=<%#Eval("ID") %>&width=100&height=100" class="activityPhoto"  alt='<%#Eval("Descrip") %>'/></a></li>
                    </ItemTemplate>  
                </asp:Repeater>
            </ul>
          </div>
        </div>
        </ItemTemplate>
       </asp:Repeater>
      </div>
       <div class="hide">
       <asp:Repeater ID="rptOnline" runat="server" 
               onitemdatabound="rptOnline_ItemDataBound">
        <ItemTemplate>
             <div class="row">
          <div class="main_photo">
            <ul>
              <li><a href="#" style="width:120px; height:120px; display:block; overflow:hidden"><img src='<%#ResolveClientUrl(Eval("CoverURL").ToString()) %>' alt='<%#Eval("Descrip") %>' class="coverUrl"/></a></li>
              <li class="padding">
                <p class="color"><%#Eval("Theme") %></p>
                <p><%#Eval("PartCount")%>人参与&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="lblPhotoCountTwo" runat="server"></asp:Label>张照片</p>
                <p>时间：<%#Eval("StartTime").ToString().Substring(0, 9).Replace("/", ".")%>-<%#Eval("EndTime").ToString().Substring(0, 9).Replace("/", ".")%></p>
                <p><%#Convert.ToInt32(Eval("Flag").ToString())==0?"[线上活动]":"[线下活动]" %></p>
              </li>
            </ul>
          </div>
          <div class="all-photo">
            <ul>
                <asp:Repeater ID="rptOnlineImg" runat="server">
                    <ItemTemplate>
                        <li><a href="#" style="width:100px; height:100px; display:block; overflow:hidden"><img src="AJAX/Thumbnail.ashx?pid=<%#Eval("ID") %>&width=100&height=100" class="activityPhoto" alt='<%#Eval("Descrip") %>' /></a></li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
          </div>
        </div>
        </ItemTemplate>
       </asp:Repeater>
      </div>
       <div class="hide">
       <asp:Repeater ID="rptOffline" runat="server" 
               onitemdatabound="rptOffline_ItemDataBound">
        <ItemTemplate>
             <div class="row">
          <div class="main_photo">
            <ul>
              <li><a href="#" style="width:120px; height:120px; display:block; overflow:hidden"><img src='<%#ResolveClientUrl(Eval("CoverURL").ToString()) %>' alt='<%#Eval("Descrip") %>'  class="coverUrl" /></a></li>
              <li class="padding">
                <p class="color"><%#Eval("Theme") %></p>
                <p><%#Eval("PartCount")%>人参与&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="lblPhotoCountThree" runat="server"></asp:Label>张照片</p>
                <p>时间：<%#Eval("StartTime").ToString().Substring(0, 9).Replace("/", ".")%>-<%#Eval("EndTime").ToString().Substring(0, 9).Replace("/", ".")%></p>
                <p><%#Convert.ToInt32(Eval("Flag").ToString())==0?"[线上活动]":"[线下活动]" %></p>
              </li>
            </ul>
          </div>
          <div class="all-photo">
            <ul>
                <asp:Repeater ID="rptOfflineImg" runat="server">
                    <ItemTemplate>
                        <li><a href="#" style="width:100px; height:100px; display:block; overflow:hidden"><img src="AJAX/Thumbnail.ashx?pid=<%#Eval("ID") %>&width=100&height=100" class="activityPhoto" alt='<%#Eval("Descrip") %>' /></a></li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
          </div>
        </div>
        </ItemTemplate>
       </asp:Repeater>
      </div>
    </div>
  </div>
</div>
    </form>
        <uc:ucFoot ID="ucFooterer" runat="server" />
    <!---登录区域--->
    <div id="div_login" style="display: none">
        <div id="div_login_title">
            <h2>登录到皮壳网</h2>
        </div>
        <div id="login_content">
            <p>
                <label for="userName">
                    用户名：</label>
                <input class="text" type="text" name="username" id="username" />
            </p>
            <p>
                <label for="password">
                    密码：</label>
                <input class="text" type="password" name="password" id="password" />
            </p>
            <p>
                <input class="button" type="button" value="登录" id="btnSubmit" />
                <a id="anchor_create_account" href="Register.aspx">没有账号？立即注册</a>
            </p>
        </div>
    </div>
    <!---登录区域结束--->
    <script src="js/login.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var k = 0;                                                                     //定义全局变量

            DrawPhoto();                                                              //调用DrawPhoto()，避免图片变形
			

            $(".slide_element").eq(0).hover(function () {
                var slide_cover = $(this).attr("src");
                var slide_id = $(this).attr("id");                                //slide_id作为参数传入ajax页面

                $("#bigPhoto").attr("src", slide_cover);
                $("#bigPhoto").load(function () {
                    DrawImage(this, 600, 400);
                });
                $("#theme").html($(".slide_theme").eq(0).html());
                $("#on_off_line").html($(".slide_on_off_line").eq(0).html());
                $("#begin_time").html($(".slide_begin_time").eq(0).html());
                $("#end_time").html($(".slide_end_time").eq(0).html());
                $.ajax({
                    url: "AJAX/Activity.ashx",
                    type: "POST",
                    data: { slide_id: slide_id },
                    dataType: "json",
                    success: function (json) {
                        //here is code for success situation
                        $("#count").html(json.Count);
                        $("#descrip").html(json.Descrip);
                    }
                });
                clearInterval(_interval);
                k = 1;
                _interval = setInterval(autoSlidePhoto, 2000);
            });
            $(".slide_element").eq(1).hover(function () {
                var slide_cover = $(this).attr("src");
                var slide_id = $(this).attr("id");                                //slide_id作为参数传入ajax页面

                $("#bigPhoto").attr("src", slide_cover);
                $("#bigPhoto").load(function () {
                    DrawImage(this, 600, 400);
                });
                $("#theme").html($(".slide_theme").eq(1).html());
                $("#on_off_line").html($(".slide_on_off_line").eq(1).html());
                $("#begin_time").html($(".slide_begin_time").eq(1).html());
                $("#end_time").html($(".slide_end_time").eq(1).html());
                $.ajax({
                    url: "AJAX/Activity.ashx",
                    type: "POST",
                    data: { slide_id: slide_id },
                    dataType: "json",
                    success: function (json) {
                        //here is code for success situation
                        $("#count").html(json.Count);
                        $("#descrip").html(json.Descrip);
                    }
                });
                clearInterval(_interval);
                k = 2;
                _interval = setInterval(autoSlidePhoto, 2000);
            });
            $(".slide_element").eq(2).hover(function () {
                var slide_cover = $(this).attr("src");
                var slide_id = $(this).attr("id");                                //slide_id作为参数传入ajax页面

                $("#bigPhoto").attr("src", slide_cover);
                $("#bigPhoto").load(function () {
                    DrawImage(this, 600, 400);
                });
                $("#theme").html($(".slide_theme").eq(2).html());
                $("#on_off_line").html($(".slide_on_off_line").eq(2).html());
                $("#begin_time").html($(".slide_begin_time").eq(2).html());
                $("#end_time").html($(".slide_end_time").eq(2).html());
                $.ajax({
                    url: "AJAX/Activity.ashx",
                    type: "POST",
                    data: { slide_id: slide_id },
                    dataType: "json",
                    success: function (json) {
                        //here is code for success situation
                        $("#count").html(json.Count);
                        $("#descrip").html(json.Descrip);
                    }
                });
                clearInterval(_interval);
                k = 3;
                _interval = setInterval(autoSlidePhoto, 2000);
            });

            function autoSlidePhoto() {
                //初始化  （获取图片地址，图片主题，描述，开始时间，结束时间等基本页面信息）
                var slide_element_src1 = $(".slide_element").eq(0).attr("src");
                var slide_element_src2 = $(".slide_element").eq(1).attr("src");
                var slide_element_src3 = $(".slide_element").eq(2).attr("src");
                var slide_element_theme1 = $(".slide_theme").eq(0).html();
                var slide_element_theme2 = $(".slide_theme").eq(1).html();
                var slide_element_theme3 = $(".slide_theme").eq(2).html();
                var slide_element_on_off_line1 = $(".slide_on_off_line").eq(0).html();
                var slide_element_on_off_line2 = $(".slide_on_off_line").eq(1).html();
                var slide_element_on_off_line3 = $(".slide_on_off_line").eq(2).html();
                var slide_element_begin_time1 = $(".slide_begin_time").eq(0).html();
                var slide_element_begin_time2 = $(".slide_begin_time").eq(1).html();
                var slide_element_begin_time3 = $(".slide_begin_time").eq(2).html();
                var slide_element_end_time1 = $(".slide_end_time").eq(0).html();
                var slide_element_end_time2 = $(".slide_end_time").eq(1).html();
                var slide_element_end_time3 = $(".slide_end_time").eq(2).html();

                if (k == 0) {
                    $("#bigPhoto").attr("src", slide_element_src1);
                    $("#bigPhoto").load(function () {
                        DrawImage(this, 600, 400);
                    });
                    $("#theme").html(slide_element_theme1);
                    $("#on_off_line").html(slide_element_on_off_line1);
                    $("#begin_time").html(slide_element_begin_time1);
                    $("#end_time").html(slide_element_end_time1);
                    //获取slide_id，用于传入后台，获取相应数据
                    var slide_id = $(".slide_element").eq(0).attr("id");
                    $.ajax({
                        url: "AJAX/Activity.ashx",
                        type: "POST",
                        data: { slide_id: slide_id },
                        dataType: "json",
                        success: function (json) {
                            //here is code for success situation
                            $("#count").html(json.Count);
                            $("#descrip").html(json.Descrip);
                        }
                    });
                    k = k + 1;
                    return false;
                }
                if (k == 1) {
                    $("#bigPhoto").attr("src", slide_element_src2);
                    $("#bigPhoto").load(function () {
                        DrawImage(this, 600, 400);
                    });
                    $("#theme").html(slide_element_theme2);
                    $("#on_off_line").html(slide_element_on_off_line2);
                    $("#begin_time").html(slide_element_begin_time2);
                    $("#end_time").html(slide_element_end_time2);
                    //获取slide_id，用于传入后台，获取相应数据
                    var slide_id = $(".slide_element").eq(1).attr("id");
                    $.ajax({
                        url: "AJAX/Activity.ashx",
                        type: "POST",
                        data: { slide_id: slide_id },
                        dataType: "json",
                        success: function (json) {
                            //here is code for success situation
                            $("#count").html(json.Count);
                            $("#descrip").html(json.Descrip);
                        }
                    });
                    k = k + 1;
                    return false;
                }
                if (k == 2) {
					$("#bigPhoto").removeClass("photo_size");
                    $("#bigPhoto").attr("src", slide_element_src3);
                    $("#bigPhoto").load(function () {
                        DrawImage(this, 600, 400);
                    });
                    $("#theme").html(slide_element_theme3);
                    $("#on_off_line").html(slide_element_on_off_line3);
                    $("#begin_time").html(slide_element_begin_time3);
                    $("#end_time").html(slide_element_end_time3);
                    //获取slide_id，用于传入后台，获取相应数据
                    var slide_id = $(".slide_element").eq(2).attr("id");
                    $.ajax({
                        url: "AJAX/Activity.ashx",
                        type: "POST",
                        data: { slide_id: slide_id },
                        dataType: "json",
                        success: function (json) {
                            //here is code for success situation
                            $("#count").html(json.Count);
                            $("#descrip").html(json.Descrip);
                        }
                    });
                    k = k + 1;
                    return false;
                }
                if (k == 3) {
                    k = 0;
                }
            }

            //下面代码实现主题及相应信息自动切换
            _interval = setInterval(autoSlidePhoto, 2000);
        })
		
		function DrawPhoto(){
						$("#bigPhoto").addClass("photo_size");
		    for (var m = 0; m < $(".slide_element").size(); m++) {
			    $(".slide_element").eq(m).load(function () {
			        DrawImage(this, 240, 160);
			    });
			}

			for (var n = 0; n < $(".coverUrl").size(); n++) {
			    $(".coverUrl").eq(n).load(function () {
			        DrawImage(this, 120, 120);
			    });
			}

			for (var w = 0; w < $(".activityPhoto").size(); w++) {
			    $(".activityPhoto").eq(w).load(function () {
			        DrawImage(this,100,100);
			    });
            }
		}
		
        //下面代码实现图片缩略，避免变形
        function DrawImage(img, W, H) {
            var width = $(img).width();
            var height = $(img).height();
            if (width / height >= W / H) {
                if (width > W) {
                    $(img).height(H);
                    width = width * H / height;
                    $(img).width(width);
                    var margin = (W - width) / 2;
                    $(img).css("margin-left", margin).css("margin-right", margin);
                }
            } else {
                if (height > H) {
                    $(img).width(W);
                    height = height * W / width;
                    $(img).height(height);
                    var margin = (H - height) / 2;
                    $(img).css("margin-top", margin).css("margin-bottom", margin);
                }
            }
        }
    </script>
</body>
</html>
